е © 


Как мы в Азбуке вкуса 
микрофронты и UI Kit создавали 


Родичкин Данила 


О 
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Я - Данила Родичкин 


Начинал с фриланса 
• Первая работа — рекламное агентство 
e В Азбуке вкуса с 2021 года 


• Сейчас — руководитель направления фронтенд-разработки 


(Ж) азбука вкуса 
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Это - доклад-история про: 
ЕН 


• Фронт в Азбуке вкуса 

• Две итерации микрофронтов 

e UI Kit 

• То, как зто всё сейчас работает 


e То, куда мы идем дальше 
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Доклад He про: 


e Пошаговые инструкции 


• Советы из серии «100% варик отвечаю прокатит» 
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Если тебе интересно узнать: 


e Пронашопыти наши боли 

e Про реализацию на нашем стеке (Vue/Nuxt) 

• Каквыглядит большая система микрофронтов на проде 

e Как мы искали способы обмана нашего движка и Webpack 
e Изчего состоит наш UI Kit 


e Как мы внедряли CSS переменные и SVG компоненты 
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Кто МЫ? 
|Ен 


«Азбука вкуса» — это уникальная омниканальная зкосистема питания с собственными 
фуд-технологиями и фуд-сервисами 


174 магазина сайт av.ru и приложение «Азбука вкуса» 


Уникальный ассортимент: более 23 000 товаров из 70 стран 
Удобные способы доставки: широкий ассортимент ко времени, 
быстрая доставка от 30 минут и самовывоз из магазина 


104 супермаркета «Азбука вкуса», 

62 минимаркета «Азбука daily», 

З специализированных винных «Энотеки», 
5 гипермаркетов «Азбука маркет», 
интернет-магазин av.ru, 

городское кафе «АВ Гранд-кафе» 
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Кто мы внутри? 


Системы хранения данных 


Navision — интегрированная система для управления розничными процессами торговли 


Siebel – система по работе с программой лояльности (ERP, WMS, MES системы) 


Kafka 


| 


Распределенный брокер для обмена сообщений между системами 


Смежные системы 


Платежный шлюз Сервис единой авторизации Сервис обработки заказов от различных систем 


Бэкенд 


SAP Hybris, бэкенд для работы сайта и мобильного Сервисы для спецпредложений клиентам 
Сервисы для обслуживания программы лояльности 
приложения (торты на заказ, продажа эл. карт и т.д.) 


Фронтенд 


AV.ru Мобильное приложение B2C- и В2В-продажи Приложение для сотрудников 
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Вступление 


В начале был jQuery... 
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В начале был jQuery... 


Корп. часть 
(лендинги) 


Хуже быть 
не может 


Хуже быть 
не может 


Экспресс-меню 


е Шаблоны Віігіх 


е Все 
вперемешку 


е Полу-живой 


е SAP Hybris 
е Структура - 
«без 


• Шаблонизатор 
Twig 

e Глубокая, 
HO понятная комментариев» 

e Docker 
отсутствует © 

e Два 


шаблонизатора 


Docker 
e jQuery 
е Два Webpack 


структура 
е ОосКег 
е Чистый JS 
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A что не так? 
ранна 


e Всё было разным 
• Фронтендеру было необходимо поднимать бэкенд 


• «Компоненты» были реализованы через копирование кода 


А иногда код забывали скопировать 
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Выбор стека 


e Большая часть команды - подрядчиков - уже работала на Vue 
e Vue – мой стек 


e Nuxt был выбран как 55В-фреймворк 


e На проекте также сделали TypeScript из коробки 


МУ мев Ann 
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Почему Vue 2? 


e Vuetify З – нет 

e Nuxt - нет 

• Рима — не стандарт no умолчанию 
e Vite – сырой 


e Vue 3 – не стандарт по умолчанию 
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(26) азбука вкуса 


Попытка номер раз 


Да почему движок сопротивляется?! 
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Зачем? 


• Основной сайт и корп. часть предстояло обьединить 
Ф Ускорение сборки 

e Разделение структуры 

e Поддержка версионирования 


e Разделение иконок 
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С чего начали? 
| 


Ф Один репозиторий - один микрофронт 
Ф Отдельная библиотека для связи воедино фронтов и их настроек 
e Каждый фронт собирается своим Webpack 


e Компоненты не собираются 
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Как это работало 
и 


e Routes - this.nuxt.extendRoutes – задокументировано 


e 5С55 - меняем настройки. 
this.nuxt.options.styleResources.scss и this.nuxt.options.css 


e Глобальные фукнции – this.nuxt.addPlugin - задокументировано 


e Vuex—ox. 


L 
GIN азбука вкуса Frontend 
Conf 2022 


Vuex 


/Шаблонизатором открываем цикл из недокументированной переменной 
<% options.keys.splii(",").forEach((key) => | Yo» 
Чтобы достать ключ, делаем mak же 
context.store.registerModule('«?o= key %>, | 
/Вызываем незадокументированную функцию, которая возвращает нечто 
/Вызываем гедийе на нечто и получаем наш объект 
.-Гедиїге( «Ус- SerializeFunction(options.values[key]).replaceAll("", ") %>"), 
патезрасеа: true, 
|, | preserveState: context.isClient }); 
<% |); Yo» 
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Основной камень преткновения 


e Nuxt 2 местами не документирует свои коробочные методы, которые нужны для его 
расширения 


e Решение – изучение исходников движка и (полу)официальных библиотек 


Nuxt Community [и] m [и] 
| Р ү 
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Awesome Vue 


ае. 


awesome 


Другие проблемы / вопросы 
ЧН 


e Hot Reload сделали лютейшими костылями 
Как подключать ассеты из фронтов без сборки? 


e Откуда брать tsconfig/webpack config? Или дублировать их? 
А если надо менять настройки? 


e Откуда брать смежные компоненты типа шапки? 
Выносить в отдельную репу? 


e Как нормально писать тесты? 


• Откуда брать Nuxt Config? 
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WHAT HAVE! 


Почему все же Михі? 


Большое сообщество 
e Отлаженная работа SSR 
e Большие возможности для расширения 


e Высокая документированность раздела Nuxt Internals 


L 
GIN азбука вкуса вс Frontend 


Conf 2022 


Вы что, не знали, что так будет? 


Ф Ассеты: планировали использовать подключение 
по названию библиотеки 


• Дублирование конфигов: решалось бы копированием 
при запуске с учетом заданных настроек 


Смежные компоненты: всё выносим в отдельную репу 
и подключаем без сборки 


• Hot Reload: я был глуп 
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Ну а Чего тогда? 
ЕЕ ОЕ 


e Слишком много правил 


e Неустойчивая структура 


e Мы могли дальше идти с этим решением, если бы хотели 


(ДВ) азбука вкуса 
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Если... 
_ [| 


e Вы делаете какое-то свое решение, проблемы будут всегда 


e Вы уперлись в проблемы — выпишите их себе 


«Официального» или готового решения для большинства проблем нет 


e Подумайте, что вы движетесь не туда 
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Миссия невыполнима 


e Состав миссии: 1 сеньор, 1 MWAN, 2 подрядчика 

e Начало миссии: июль 

Ф Сроки миссии: конец осени 

e Задачи миссии: редизайн и реплатформинг карточки товара и каталога 
• Документированность API: 5% 


e Шансы на успех: ?% 
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Попытка номер два 


Один UI Kit и шесть месяцев спустя... 
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Один UI Kit и шесть месяцев спуста... 
=== 


e Необходимо воскресить идею 
Ф Монорепа стала обкатанной 
e Структура по репозиториям не вышла 


• Оставляем ту же концепцию в виде монорепы 
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Настройки проекта 


export interface /Рго/есі | 
microModuleTest: { 
routes: '2.0O/test', 
icons: IAVRUIlconMicroModule Test, 
| 
ћотерРаве: | 
routes: '/" | '2.0/demo/sliders', 
icons: IlAVRUIconHomePage, 
| 
catalog: { 
routes: 'catalog' | 'search' | 'discount' | 'brands' | 'collections 
icons: never, 


в 


e Все фронты выносим в интерфейс 


e Для строгости прописываем, какие есть пути и иконки 


(Ж) азбука вкуса 
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Настройки проекта 
CE ЛЕ а З ИЕ | 


(ДВ) азбука вкуса 


const config: IProjectConfigs'singleCart'» = | 


name: 'singleCart', 
package: { 
name: 'Qav.ru/single-cart', 
version: '2.5.0-dev', 
), 
extendRoutes: (routes, resolve) => { 
routes.push(f 
name: 'Cart', 
path: '/cart', 
component: гезоїме( dirname, 
'pages/index.vue'), 
}); 
return routes; 
}, 
lé 
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Настройки проекта 


const config: IProjectConfigs'singleCart'» = { 
scssVariables: | 
{ 
src: __дїгпате + '/scss/singleCartVariables.scss', 
strategy: 'push', 
), 
| 
routesRegExp: { 
сагі: /AVcart(VS15)/, 
), 
vuex: { 
index: indexStore, 
cart: singleCartStore, 
ђ 
mixins: [ 
{ 
key: 'SsingleCart', 
mixin: SingleCartMixin, 
initAndBind: true, 
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Подключение \чех 
ОЗ 


• Необходимо регистрировать и дерегистрировать модули «на лету» 
e Регистрацию надо проводить в Middleware, 


• Дерегистрацию - в routes.afterEach после Vue.nextTick 
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Это HE PEKOMEHAYETCA 
аша 


e Есть Рита, new standard tool 


e Это не всегда хорошо и предсказуемо работает 
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МРМ-пакеты 


e 1 пакет = 1 фронт 
e Хранилише пакетов — Gitlab NPM Registry 
e Локально и при сборке можно указать, какие пакеты собирать 


• При обновлении пакета версия равна версии всей репы 
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МРМ-пакеты 


e На тестовых окружениях публикуем по коммиту 
• На проде – по фиксированной версии 


e На СІ собираем дважды 


(28) азбука вкуса 
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МРМ-пакеты 
| б б'б'б'б'б'б'б'б'б'б'б'б'б'б'б'б'б'б'б'б'б' б б-' .' б-4« .СХ. бА5 З. 0 '.» '9'.1АООООООООО:»?ЄУ 


Qav.ru/catalog $1 release/2.5 -0- бе8ес143 Г, я 
2.5.0-dev-6e8ec143 published by Данила Родичкин Ё npm Created 2 days ago ` 
Qav.ru/recent-items $1 release/2.5 -0- 6e8ec143 Г, . 
2.5.0-dev-6e8ec143 published Бу Данила Родичкин Ё npm Created 2 days ago ` 
Qav.ru/lp-quality $1 release/2.5 -> 6e8ec143 Г, . 
2.5.0-dev-6e8ec143 published Бу Данила Родичкин Ё npm Created 2 days ago ` 
Qav.ru/lp-mobile $1 release/2.5 -0- бе8ес143 Г, . 
2.5.0-dev-6e8ec143 published by Данила Родичкин Ё npm Created 2 days ago ` 
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МРМ-пакеты 


Qav.ru/catalog 


м 2.5.0-dev-6e8ec143 published 2 days ago 
a npm В 38.21 КІВ Ф release/2.5 


Оетай Other versions 


History 


®© Qav.ru/catalog version 2.5.0-dev-6e8ec143 was first created 2 days ago 
-о- Created by commit #6е8ес143 on branch release/2.5 
(1) Вий by pipeline #93722 triggered 2 days ago Бу Данила Родичкин 


ЁЗ Published to the Warp Раскаде Registry 2 days ago 
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МРМ-пакеты 
[и 


Мрт Test 

©) npm:generate-config б ©) empty-job 4; 

©) npm:publish-projects © push:npm:auto:catalog-2.4.3-dev-latest Е, 

Trigger job 

©) push:npm:auto:lp-beauty-2.4.3-dev-latest + 
©) push:npm:auto:lp-quality-2.4.3-dev-latest + 
© push:npm:auto:sinale-product-2.4.3-dev-latest ЕУ 
(©) push:npm:manual:demo-2.4.2-7-latest » 
(©) push:npm:manual:homepage-2.4.2-7-latest » 
(©) push:npm:manual:lp-melon-2.4.2-7-latest » 
(©) push:npm:manual:lp-mobile-2.4.2-7-latest » 
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(Ж) азбука вкуса 


(Qav/vue-module 


UI Kit 


(28) азбука вкуса 
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АТОНИ БУДУТ УСЛОЖНЯТЬ! 
ПРИБАВИТБ ФИЧ! 
РАЗ ДВА! РАЗ-ДВА! 


ат“ жк... - © 


UI Kit 


• Созданные компоненты доступны только Ha av.ru 
e Некоторые компоненты создавались «под задачу» 
Дизайнеры также меняют уже готовый дизайн «под другую задачу» 


e Мы изобрели 10 оттенков одного и того же зеленого 
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Что выносим в библиотеку 


• глобальный HTML, подключение шрифтов 
e 5С55-переменные 

e глобальные классы/методы 

компоненты из Figma UI Kit 

Ф демо-страницу с компонентами 


Ф подключение SWiper, v-touch и других сторонних библиотек 
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UI Kit 


Страницы 


Инпуты | Всплывающие окна (попапы) | Всплывающие сообщения (тултипы) || Алерты | 
Virtual Scroller | Infinite Scroll || Лимитированный текст JI Иконки || Календарь || Подвал | Типографика Лоадер 


Настройки 
Хі v primary У Отклочена Разрешитњ клик по отключенной кнопке Нет ховера 
В состоянии "ховер" В состоянии "ховер" даже в МВС Кнопка со ссылкой noUnderline (для plain) noFocusAnimation 


Вставить иконку слева Вставить иконку справа 


Кнопки 


© Кнопка с тах width, ей мало... © 


Кнопка с тт width/height/kacrom padding © 


Наведись, чтобы текст отодвинулся от стрелки < 


Текст кнопки без иконок Ф Текст кнопки с иконками © 


Кнопка, изменены все цве 


Controls 
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Подключение компонентов 
аа 


e Для локальной разработки копируем компоненты в папку .global-components 
Добавляем “alias” в Nuxt Config и “paths” в TSConfig 


e Компоненты и статика в VUE-MOdule не собирается 
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Работа с цветами 
ни 


Ф Основной минус CSS Variables — отсутствие поддержки прозрачности 


e А также невозможность доступа к переменным на SSR (из коробки) 
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Работа с цветами 
ЕН 


(function toRawRGB($color) { 
(Qreturn unquote(red(Scolor) + ', ' + green(Scolor) + ', ' + blue($color)); 


) 


//Основные цвета бренда 
SbrandPrimaryRaw: toRawRGB(#63C634); //99, 198, 52 Ha выходе 


ScolorsMap: ( 
//ргітагу 
ibrandPrimary: var(--brandPrimary, SbrandPrimaryRaw), 


); 
SbrandPrimary: rgb(map-get(ScolorsMap, 'ibrandPrimary”)); 


(function varToRgba($ScolorName, Sopacity) 4 
@if (map-has-key(ScolorsMap, 'i#fScolorName)')) { 
(Огетигп rgba(map-get(ScolorsMap, 'i#fScolorName)'), Sopacity) 
| @ебе | 
Qreturn геба(маг(--Н 5 сојогМате)), Sopacity) 
) 
) 
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Работа с цветами 
ни 


| | Я { 
(Фітрогі 'styles'; цесі: Ло 56556. 
гехрогі { ША 
brandPrimary: SbrandPrimary; Í i 
brandPrimaryRaw: SbrandPrimaryRaw аа с 
options: { 
importLoaders: 1, 
modules: { 
import variables from "../../../public/scss/js-variables.scss'; mode: 1с55, 
| 
), 
}, 
{ 
loader: 'sass-loader', 
}, 
|, 
|) 
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brandPrimary: 
brandSecondary: 
darkGrey: 
mediumGrey: 
lightGrey: 
supertightGrey: 
ultralightGrey: 
mint: 

herb: 

pistachio: 
cherry: 

purple: 

plum: 
blueberry: 

milk: 


matcha: 


Ө 99, 198, 52 
Q 18. 79, 46 
Q 35. 37 39 
Ө 130,136, 142 
193, 198, 204 
231, 233, 236 
246, 247, 248 
Q 62, 180,137 
Ө 70, 157, 105 
@ 210, 217,127 
Ф 164, 42,75 
Ө 164, 104, 204 
Q 55, 26, 99 
Ф 42 51,95 
244, 247,239 
©) 164, 197, 178 


lagune: 
cacke: 
peach: 
cranberry: 
orchid: 
royal: 
marine: 
oliva: 
sky: 
cream: 
melon: 
rose: 
lavender: 
blue: 
moon: 


tiffany: 


Ө 106, 186, 185 
Ө 184, 149, 122 
Ө 245, 148, 90 
Ө 223, 83, 83 
Ө 181, 156, 198 
Q зэ 83, 105 
Ө за, 160, 194 
С 199, 214, 175 
6 па, 196, 220 
3 241, 191, 156 
©) 249, 203, 58 
©) 232, 156, 169 
222, 207, 230 
©) 146, 196, 231 
233, 245, 231 
“ _ 175, 226, 222 


сарриссто: 

vanilla: 

sakura: 

реап: 

ice: 

yellow: 

red: 

white: 

black: 
containerDesktopWidth: 
containerMobilePadding: 
pageWidth: 
pageWindowwWidith: 
pageHeignht: 
pageWindowHeight: 
pageScrollbarWidth: 


254, 234, 212 

@ 247,221,158 
251, 202, 202 
237, 238, 249 
237, 246, 255 

©) 253, 214, 75 

Q 198, 52, 52 
255, 255, 255 

Q ооо 

1200px 

20рх 

100vw 

100vw 

100vh 

100vh 

Opx 


От SVG хочется, чтобы: 
Pen 


цвета SVG автоматически из НЕХ становились CSS Variables 
SVG можно было импортировать как компонент 
каждый цвет SVG можно было менять параметром компонента 


набор SVG был разным у каждого фронта 


ШЕ а пас 


цвет SVG можно было менять через изменение color (currentColor) 


L 
(Др) азбука вкуса Frontend 
Conf 2022 


Проблема стандартных библиотек 
| 


• нужна возможность делить Ha микрофронты 


• нужна интеграция с палитрой цветов 
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Code splitting для 5МО 
DE НЕ 


e глобальная переменная с набором иконок (набор = name проекта) 


e в іпдех.уце вызывается миксин, куда передается гедиіге-функция 
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Code splitting для 5МО 


mixins: [ export function createProjecticonsMixin(f 
createProjecticonsMixin(t project, 
project: 'homePage', requireFunction, 
requireFunction: (icon: string) => require("./../assets/icons/$[ icon ).svg?prefix`), kI 
), 


project: IProjectsList, 
requireFunction: (icon: string) =» any, 
у: ComponentOptions«Vue» { 
return ( 
beforeCreate() { 
if ((commonlconsList[project]) { 
commonlconsList[project] = (icon: string) => | 
return requireFunction(icon.replace(`$[ project }/`, ")); 


li 
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Алгоритм svgMultipleColors 
| 


attributes.class= ` transformed-icon--advanced 5( пате }-${ index F}; 
if (lattributes.style) attributes.style ="; 


if (avColor) { 
attributes.class +=“  transformed-icon--advanced 5( name |-5| avColor |; 
attributes.style += `S( пате |: var(--icon-color-$( avColor |, var(--icon-color-$ index }, 50 AVPlatformStyles.variables[avColor] }));`; 


} 


else { 
attributes.style += `S( name |: var(--icon-color-$( index ), ${ attribute ђ); ; 


} 


e Иконка преобразовывается библиотекой зуго: 
добавляется viewBox вместо width,height и прочие оптимизации 


e Иконка парсится в js через библиотеку SVESON 


• Рекурсивно проходимся по всем «детям» 
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Финал 


Подводим итоги 
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Основные этапы 


1-я итерация 
микрофронтов 


UI Kit 


(28) азбука вкуса 


Каталог и 
карточка 
товара 


2-я итерация 
микрофронтов 


Главная и 
корзина 


FrontendConf 
2022 
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Что дальше 


Зима 2022 Весна 2023 


е Axios -> Fetch 


e Редизайн 


e Vuex -» Pinia страницы 
е Ма z7 оформления 
заказа 
e Composables n A 
Блато е остепенный 
глобальных редизайн 
функций личного 
кабинета 


е Расширение 
UI Kit 


a азбука вкуса 


е Переход на Vue 3 
и Nuxt 3 


(Возможно) 
Переход на Vite 
(Возможно) 
Повторное 
посещение 
FrontendConf с 
рассказом о 
косяках 
Nuxt 3 и Vite 
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25 лет «Азбуке вкуса»! 


Скидка 25% по промокоду 25LET 


(Ж) азбука вкуса 


Frontend 
Conf 2022 


4 


Спасибо за внимание! 


ОЛЖО, 
m о 
(е)! sè 


GQDANILUK4000 


Ш == 
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